import React from 'react'
import StateImprovement from './stateImprovement';


function toCelsius(fahrenheit) {
  return (fahrenheit - 32) * 5 / 9;
}

function toFahrenheit(celsius) {
  return (celsius * 9 / 5) + 32;
}

function tryConvert(temperature, convert) {
  const input = parseFloat(temperature);
  if (Number.isNaN(input)) {
    return '';
  }
  const output = convert(input);
  const rounded = Math.round(output * 1000) / 1000;
  return rounded.toString();
}

function BoilingVerdict(props) {
  if (props.celsius >= 100) {
    return <p>The water would boil.</p>;
  }
  return <p>The water would not boil.</p>;
}

class StateParent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          date: new Date(),
          scale: 'c',
          temperature: '',
        }
    }

    handleCelsiusChange(temperature) {
      console.log(temperature);
      
      this.setState({scale: 'c', temperature});
    }
  
    handleFahrenheitChange(temperature) {
      this.setState({scale: 'f', temperature});
    }
    render() {
      const { scale } = this.state;
      const { temperature } = this.state;
      console.log(temperature, '===', scale);
      const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
      const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;
      console.log(celsius);
      return <div>
        <StateImprovement scale="c" temperature={celsius} onTemperatureChange={this.handleCelsiusChange.bind(this)} />
        <StateImprovement scale="f" temperature={fahrenheit} onTemperatureChange={this.handleFahrenheitChange.bind(this)} />
        <BoilingVerdict celsius={parseFloat(celsius)} />
      </div>;

    }
  }


  export default StateParent;